<template>
  <div>
    <div class="orderSetting-container out-border">
      <el-form style="padding: 0 50px">
        <el-form-item label="秒杀订单超过：">
          <div class="d-flex input-width">
            <el-input type="text" v-model.number="orderSet.flashOrderOvertime" />
            <span class="d-inline-block btn btn-time">分</span>
            <span class="d-block">未付款，订单自动关闭</span>
          </div>
        </el-form-item>
        <el-form-item label="正常订单超过：">
          <div class="d-flex input-width">
            <el-input type="text" v-model.number="orderSet.normalOrderOvertime" />
            <span class="d-inline-block btn btn-time">分</span>
            <span class="d-block">未付款，订单自动关闭</span>
          </div>
        </el-form-item>
        <el-form-item label="发货超过：">
          <div class="d-flex input-width">
            <el-input type="text" v-model.number="orderSet.confirmOvertime" />
            <span class="d-inline-block btn btn-time">分</span>
            <span class="d-block">未收货, 订单自动完成</span>
          </div>
        </el-form-item>
        <el-form-item label="订单完成超时：">
          <div class="d-flex input-width">
            <el-input type="text" v-model.number="orderSet.finishOvertime" />
            <span class="d-inline-block btn btn-time">分</span>
            <span class="d-block">自动结束交易, 不能申请售后</span>
          </div>
        </el-form-item>
        <el-form-item label="订单完成超时：">
          <div class="d-flex input-width">
            <el-input type="text" v-model.number="orderSet.commentOvertime" />
            <span class="d-inline-block btn btn-time">分</span>
            <span class="d-block">自动五星好评</span>
          </div>
        </el-form-item>
        <el-form-item label=" ">
          <div class="d-flex input-width">
            <el-button type="primary" @click="submitupdatedSetForm">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { fetchOrderSetting, fetchUpdatedOrderSetting } from '@/api/api'
export default {
  name: '',
  data() {
    return {
      orderSet: {},
    }
  },
  methods: {
    async getOrderSetting() {
      let res = await fetchOrderSetting()
      this.orderSet = res.data
    },
    async submitupdatedSetForm() {
      console.log(this.orderSet)
      let res = await fetchUpdatedOrderSetting(this.orderSet)
      console.log(res)
    },
  },
  created() {
    this.getOrderSetting()
  },
}
</script>
<style lang="scss" scoped>
.orderSetting-container {
  width: 800px;
  padding: 35px 35px 15px;
  margin: 0 20px;
  margin: 0 auto;
}
.btn {
  background: #f5f7fa;
  text-align: center;
}
.el-input {
  width: 48%;
}
.btn-time {
  border: 1px solid #dcdfe6;
  border-radius: 0 5px 5px 0;
  color: #909399;
  padding: 0 20px;
  line-height: 36px;
}
.input-width {
  width: 460px;
}
::v-deep .el-form-item__label {
  width: 160px !important;
}
</style>
